<template>
  <el-dialog
    class="clinic-operate-dialog"
    :width="dialogWidth"
    append-to-body
    top="5vh"
    title="收费明细"
    :close-on-click-modal="false"
    :visible.sync="visible"
    style="cursor:default;"
  >
    <div class="clinic-operate-from">
      <el-container>
        <el-main>
          <!-- 患者信息 -->
          <personal
            :address="addressInfoData"
            :orderData="orderInfo"
            :infoNo="info.infoNo"
            :data="consultInfo"
            ref="personal"
          >
          </personal>
          <!-- table  -->
          <div class="table" :style="style" v-loading="loading" style="padding-left:15px">
            <el-tabs v-model="activeName" @tab-click="handleClick" >
              <template v-for="(item,index) in infoDrugs" >
                <template v-if="item.orderCondition == 5">
                  <el-tab-pane :key="index"  :label="`${durtType(item.prescriptionType)}`" :name="`${index}`"></el-tab-pane>
                </template>
                 <template v-else-if="item.payStatus == 3">
                  <el-tab-pane :key="index"  :label="`${durtType(item.prescriptionType)}`" :name="`${index}`"></el-tab-pane>
                </template>
                <template v-else>
                  <el-tab-pane :key="index"  :label="`${durtType(item.prescriptionType)}`" :name="`${index}`"></el-tab-pane>
                </template>
              </template>
            </el-tabs>
            <el-table v-if="visible" ref="table" :data="info.infoDrugs">
              <el-table-column label="序号" type="index" width="55"></el-table-column>
              <el-table-column label="商品名称" prop="drugName" width="200"></el-table-column>
              <el-table-column label="药品类型" prop="drugType">
                <template slot-scope="scope">
                  <drugType :value="scope.row.drugType"></drugType>
                </template>
              </el-table-column>
              <el-table-column label="单价" prop="price">
                <template slot-scope="scope">{{formatMoney(scope.row.price)}}</template>
              </el-table-column>
              <template v-if="info.num && info.prescriptionType != 2">
                <el-table-column label="数量*剂数" prop="quantity">
                  <template slot-scope="scope">{{ (scope.row.quantity / info.num) + scope.row.packUnit }}*{{ info.num }}</template>
                </el-table-column>
              </template>
              <template v-else>
                <el-table-column label="数量" prop="quantity">
                  <template slot-scope="scope">{{ (scope.row.quantity) + scope.row.packUnit }}</template>
                </el-table-column>
              </template>
              <el-table-column label="折扣" prop="discount">
                <template slot-scope="scope">
                  <!-- <template v-if="operate === 1000">
                    <columnClickEdit
                      @change="onChangeDiscount"
                      dataType="number"
                      :value="scope.row.discount"
                      :eternal="true"
                      :row="scope.row"
                      :max="100"
                      :min="0"
                    >
                      <span>{{ discountText(scope.row.discount) }}</span>
                    </columnClickEdit>
                  </template>
                  <template v-else>{{ discountText(scope.row.discount) }}</template> -->
                  {{ discountText(scope.row.discount) }}
                </template>
              </el-table-column>
              <el-table-column label="折后金额" prop="discountPrice">
                <template slot-scope="scope">{{formatMoney(scope.row.discountPrice, 4)}}</template>
              </el-table-column>
            </el-table>
          </div>
        </el-main>
      </el-container>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button
        @click="onClickUse()"
        :loading="submitLoading"
        type="primary"
      >调用</el-button>
      <el-button
        :loading="submitLoading"
        @click="visible=false"
      >关闭</el-button>
    </div>
  </el-dialog>
</template>

<script>

import personal from "@/views/charges/clinicCharges/module/personal";
import { getDetails } from "@/api/outpatientService/perscription";
import drugType from "@/views/storageRoom/drug/module/drugType";
import { formatMoney } from "@/utils/index";

export default {
  name: "historyOrderForm",
  components: {
    personal,
    drugType
  },
  data() {
    return {
      visible: false,
      consultInfo: {},
      addressInfoData: {},
      orderInfo: {},
      loading: false,
      activeName: 0,
      infoDrugs: [],
      info: {},
      operate: 0,
      orderCheckStatus: 1,
      submitLoading: false
    }
  },
  computed: {
    dialogWidth() {
      return window.innerWidth * 0.95 + "px";
    },
    style() {
      return {
        height: "calc(100% - 193px)"
      };
    },
  },
  methods: {
    formatMoney,
    open(row, index) {
      this.operate = row.payStatus;
      this.initIndex = index;
      this.visible = true;
      this.refresh(row.id);
    },
    // 刷新
    refresh(id) {
      this.loading = true;
      getDetails(id).then(res => {
        this.handleData(res);
        this.loading = false;
      });
    },
    handleClick(tab) {
      if(this.infoDrugs) {
        this.info = this.infoDrugs[tab.index];
        var oMap = this.infoDrugs[tab.index];
        this.operate = oMap.payStatus;
        this.orderCheckStatus = oMap.orderCondition;
      }
    },
    handleData(data) {
      // 问诊信息
      let consult = data.consult;
      this.consultInfo = {
        patientName: data.order.patientName,
        consultDocName : data.order.docName,
        patientSex: data.order.patientSex,
        patientAge: data.order.patientAge,
        orderTime: data.order.orderTime,
        consultNo: data.order.consultNo
      };
      if(data.consult) {
        this.consultInfo.consultDepartName = consult.consultDepartName;
        this.consultInfo.consultType = consult.consultType;
        this.consultInfo.diagnosis = consult.diagnosis;
      }
      this.addressInfoData = data.orderAddress;
      this.orderInfo = data.order;
      this.orderInfo.deliveryType = this.orderInfo.deliveryType ? this.orderInfo.deliveryType:2;
      // 药品列表
      this.infoDrugs = data.order.infos;
      this.infoDrugs.forEach(ed => {
        var dMap = {name:null,money:null,processCost:null,drugCost:null,orderCondition:null,payStatus:null};
        dMap.name = this.durtType(ed.prescriptionType);
        dMap.money = ed.totalPay;
        dMap.processCostName = '加工费';
        dMap.drugCostName = '药费';
        dMap.drugCost = ed.drugCost;
        dMap.processCost = ed.processCost;
        dMap.orderCondition = ed.orderCondition;
        dMap.payStatus = ed.payStatus;
      });
      
      if(this.initIndex == 99999){
        this.activeName = '0';
      }else{
        this.activeName = this.initIndex.toString();
      }
      if(this.infoDrugs){

        this.info = this.infoDrugs[this.activeName];
        if(this.initIndex == 99999){
          var oMap = this.infoDrugs[0];
          this.orderCheckStatus = oMap.orderCondition;
          this.operate = oMap.payStatus;
        } else {
          var oMap = this.infoDrugs[this.activeName];
          this.operate = oMap.payStatus;
          this.orderCheckStatus = oMap.orderCondition;
        }
      }
      if(this.$refs.table) {
        this.$refs.table.clearSelection();
      }
    },
    durtType(type) {
      let res = "";
      switch (type) {
        case 1:
            res = '中药处方-饮片'
            break;
        case 2:
            res = '成药处方'
            break;
        case 3:
            res = '中药处方-颗粒剂'
            break;
        case 4:
            res = '输液处方'
            break;
        case 5:
            res = '敷贴处方'
            break;
      }
      return res;
    },
    discountText(discount) {
      let num = Number(discount);
      return num * 100 + "%";
    },
    // 调用历史处方
    onClickUse(){
      this.visible = false;
      this.$parent.onClickUse(this.orderInfo);
    },
  }
}
</script>